<template>
  <div class="container">
    <preview-img
      ref="previewImg"
      class="layout"
      :mode="mode"
      :img-list="imgList"
      :config="config"
      :show-clip="showClip"
      :layout="layout"
      @clipSuccess="clipSuccess"
      @pageNoChange="pageNoChange"
      @modeChange="modeChange"
    />
    <div class="right">
      <p>布局结构</p>
      <div class="grid-area">
        <el-select
          v-model="layout"
          @change="layoutChange"
        >
          <el-option
            value="row"
            label="水平布局"
          />
          <el-option
            value="column"
            label="垂直布局"
          />
        </el-select>
      </div>
      <p>操作区</p>
      <div class="grid-area">
        <el-button
          type="primary"
          @click="update('person')"
        >
          刷新人物视图
        </el-button>
        <el-button
          type="primary"
          @click="update('scene')"
        >
          刷新风景视图
        </el-button>
        <el-button
          type="primary"
          @click="navTo('global')"
        >
          切换到全局视图
        </el-button>
        <el-button
          type="primary"
          @click="navTo('person')"
        >
          切换到人物视图
        </el-button>
        <el-button
          type="primary"
          @click="navTo('scene')"
        >
          切换到风景视图
        </el-button>
        <el-button
          @click="toPageNo('person', 2)"
        >
          跳转到人物视图第2页
        </el-button>
        <el-button
          @click="toPageNo('scene', 3)"
        >
          跳转到风景视图第3页
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import PreviewImg from '../main';

export default {
  name: 'App',
  components: {
    PreviewImg,
  },
  data() {
    return {
      layout: 'column', // 布局展示 row | column
      mode: 'global', // 当前分栏模式
      showClip: true, // 是否展示截图
      imgList: [
        {
          key: 'person',
          value: [
            {
              fileName: 'person.jpg',
              filePath: require('./images/person.jpg')
            }
          ],
        },
        {
          key: 'scene',
          value: [
            {
              fileName: 'scene-2.jpg',
              filePath: require('./images/scene-2.jpg')
            },
            {
              fileName: 'scene-3.jpg',
              filePath: require('./images/scene-3.jpg')
            },
          ],
        }
      ],
      config: [
        {
          key: 'global',
          label: '全局',
          global: true,
        },
        {
          key: 'person',
          label: '人物',
          pageNo: 1,
        },
        {
          key: 'scene',
          label: '风景',
          pageNo: 1,
        }
      ]
    };
  },
  methods: {
    /**
     * @description 截图完成后的回调 包含File对象和base64图片
     * @param data file && base64
     */
     clipSuccess(data) {
      console.log(data, '最后的输出文件');
      const aTag = document.createElement('a');//创建一个a标签
      aTag.download = data.file.name;
      const href = URL.createObjectURL(data.file);//获取url
      aTag.href = href;
      aTag.click();
      URL.revokeObjectURL(href);//释放url
    },
    /**
     * 分栏数据页码改变
     * @param {*} data 变化的那一栏数据
     */
     pageNoChange(data) {
      console.log(data, '页码改变');
    },
    /**
     * 刷新视图
     * @param {*} key 视图名（key值）
     */
    update(key) {
      this.$refs['previewImg'].update(key);
    },
    /**
     * 分栏模式改变
     * @param {*} data 变化的那一分栏
     */
    modeChange(data) {
      console.log(data, 'mode改变');
    },
    /**
     * 跳转到指定分栏的指定页码
     * @param {*} key 分栏key
     * @param {*} pageNo 页码
     */
    toPageNo(key, pageNo) {
      const curSingleColumn = this.config.find(item => item.key === key);
      curSingleColumn.pageNo = pageNo;
    },
    /**
     * 切换到指定视图
     * @param column 列名
     * @param key 分栏key
     */
    navTo(key) {
      this.mode = key;
    },
    layoutChange(layout) {
      this.layout = layout;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  .right {
    flex: 0 0 400px;
    .grid-area {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 10px;
      border: 3px dashed #eee;
      padding: 10px;
      ::v-deep .el-button {
        margin-left: 0;
      }
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }
}
</style>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
ul, li {
  list-style: none;
}
</style>
